<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #mybox {
      width: 200px;
      height: 200px;
      background: darkblue;
    }

    #con {
      width: 300px;
      height: 300px;
      background: darkmagenta;
    }

    #pop {
      width: 300px;
      height: 300px;
      background: springgreen;
      position: absolute;
    }
  </style>
</head>

<body>
  <button id="dbl">双击</button>
  <div id="mybox">
    <div>99999999999999999</div>
  </div>
  <div id="con">

  </div>
  <div id="pop">

  </div>
  <script>
    // js 事件都是on+ 事件名   
    // 鼠标事件 onclick ondblclick  
    // onmouseover 鼠标移入  onmouseout  鼠标移出触发
    var dbl = document.getElementById("dbl")
    dbl.ondblclick = function () { //双击事件
      this.style.backgroundColor = "red"
    }
    //onmouseover  onmouseout   
    var mybox = document.getElementById("mybox");
    mybox.onmouseover = function () { //鼠标移入变粉色
      console.log("移入了")
      this.style.backgroundColor = "pink"
    }
    mybox.onmouseout = function () { //鼠标移出变绿色
      console.log("移出了")
      this.style.backgroundColor = "green"
    }
    // onmouseenter 和onmouseleave 鼠标移入移出
    var con = document.getElementById("con")
    con.onmouseenter = function () {
      this.style.backgroundColor = "pink"
    }
    con.onmouseleave = function () {
      this.style.backgroundColor = "green"
    }
    // onmouseover  onmouseout  和 onmouseenter 和onmouseleave 区别
    // onmouseover  onmouseout 移入移出子元素也会触发事件
    // onmouseenter 和onmouseleave 移入移出子元素不会触发事件
    // 
    var pop = document.getElementById("pop");
    pop.onmousedown = function () {//onmousedown 鼠标按下事件 
      this.style.backgroundColor = "red"
    }
    pop.onmouseup = function () { //onmouseup 鼠标抬起触发
      this.style.backgroundColor = "yellow"
    }
    // pop.onmousemove = function (e) { //onmousemove 鼠标在元素上移动触发
    //   console.log("移动了鼠标")
    //   // 事件对象 每个事件函数都有的参数event  e 
    //   var e = e || window.event; // e 谷歌   IE window.event  
    //   // 鼠标位置
    //   console.log(e.clientX)
    //   console.log(e.clientY)
    //   this.style.top = e.clientY + "px";
    //   this.style.left = e.clientX + "px";
    // }
    // 整个文档绑定了鼠标移动事件
    document.onmousemove = function (e) {
      pop.style.top = e.clientY + "px";
      pop.style.left = e.clientX + "px";
    }
  </script>
</body>

</html>